<template>
<!-- 撤回商标变更申请人 -->
<div class="box">
    <el-form :model="ruleForm" :inline="false" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="medium">

        <div class="must">
<!--
            <el-form-item label="被许可人(中文)：" prop="beNameLicensee">
                <el-input v-model="ruleForm.beNameLicensee" placeholder="被许可人(中文)"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">

                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="beNameLicenseeEn">
                <el-input v-model="ruleForm.beNameLicenseeEn" placeholder="被许可人(英文)"></el-input>

            </el-form-item>
            <el-form-item label="被许可人地址(中文)：" prop="beNameLicenseeAddr">
                <el-input v-model="ruleForm.beNameLicenseeAddr" placeholder="被许可人地址(中文)"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">

                        <span>示例：北京市xx区xx街xx号</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="beNameLicenseeEn">
                <el-input v-model="ruleForm.beNameLicenseeAddrEn" placeholder="被许可人地址(英文)"></el-input>

            </el-form-item> -->

            <!-- issue 删除上 -->

            <!-- <el-form-item label="联系人：" prop="linkman">
                <el-input v-model="ruleForm.linkman" placeholder="请填写联系人"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>示例：张三</span>
                    </div>
                </div>
            </el-form-item> -->

            <!-- <el-form-item label="代理机构名称：" prop="ageName">
                <el-input v-model="ruleForm.ageName" placeholder="请填写联系人"></el-input>
            </el-form-item> -->

            <el-form-item label="商标申请号/注册号：" prop="number">
                <el-input v-model="ruleForm.number" placeholder="请填写商标申请号/注册号"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：商标申请号/注册号不能为空</span>
                    </div>
                </div> -->
            </el-form-item>
            <el-form-item label="原变更申请号：" prop="oldnum">
                <el-input v-model="ruleForm.oldnum" placeholder="请填写原变更申请号"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：原变更申请号不能为空</span>
                    </div>
                </div> -->
            </el-form-item>

            <el-form-item class="upload" label="网上确认书：" prop="afterAmount"    :show-message="!old_imgs['qrfile']">
                <upfile :callback="setSure">
                    <img :src="old_imgs['qrfile']" v-if="old_imgs['qrfile']" />
                </upfile>
                <div class="exam-img">
                    <div class="img-inform">
                        <img src="../../assets/imgs/inform.png">
                        <span>示例:</span>
                    </div>
                    <examimg :imgType="7"></examimg>
                </div>
                <div>
                    <span class="informs">
                        请点此
                        <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>，查到相应商标编号并填充
                    </span>
                    <br />
                    <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
                </div>
            </el-form-item>

            <el-form-item label="其他附件：" prop="dengjichenluofile">
            <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
            <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                <span>提示：其他附件</span>
                </div>
            </div>
            </el-form-item>

            <el-form-item label="撤回理由：" prop="reason">
                <el-input type="textarea" v-model="ruleForm.reason" placeholder="请填写撤回理由"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：撤回理由不能为空</span>
                    </div>
                </div> -->
            </el-form-item>

            <div class="line"></div>

            <el-form-item label="是否共有商标：" prop="radio">
                <el-radio-group v-model="ruleForm.radio">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：选项不能为空</span>
                    </div>
                </div> -->
            </el-form-item>

<el-form-item label="其他共有申请人" v-if="ruleForm.radio ==1"></el-form-item>

            <el-form-item label="其他转让人："  v-if="ruleForm.radio ==1">
                <both :callback="getBothZ"  :append="this.ruleForm.commonArr"  :class_id="$route.query.id"></both>
            </el-form-item>


<!--
            <div v-if="ruleForm.radio" class="common">
                <el-form-item label="其他共有人" prop="person_type"></el-form-item>
                <template v-for="(item,index) in common">

                    <el-form :key="index" :model="common[index]" :inline="false" :rules="rules_common" ref="ruleFormCommon" label-width="200px" class="demo-ruleForm" size="medium">
                        <el-form-item label="更变前名称(中文)：" prop="value">
                            <el-input v-model="common[index].value" placeholder="请填写姓名"></el-input>
                            <div class="inform">
                                <img src="../../assets/imgs/inform.png" alt="通知" />
                                <div class="content">

                                    <span>示例：北京市xxx网络科技有限公司/张三</span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="(英文)：" prop="englishValue">
                            <el-input v-model="common[index].englishValue" placeholder="请填写姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="变更前地址(中文)：" prop="siteValue">
                            <el-input v-model="item.siteValue" placeholder="请填写地址"></el-input>

                        </el-form-item>
                        <el-form-item label="(英文)：" prop="englishSiteValue">
                            <el-input v-model="item.englishSiteValue" placeholder="请填写地址"></el-input>
                        </el-form-item>
                    </el-form>

                </template>
                <div class="btn-group-com">

                    <el-button icon="el-icon-plus" @click="plus" circle></el-button>
                    <el-button icon="el-icon-minus" @click="minus" circle></el-button>
                </div>
            </div> -->

            <el-form-item>
                <div class="btns">
                    <el-button type="primary" @click="outStep">上一步</el-button>

                    <el-button type="primary" @click="testing">提交并审核</el-button>
                </div>
            </el-form-item>
            <el-dialog class="dialog" :show-close="false" :center="true" :visible.sync="dialogVisible" width="460px" :before-close="handleClose">
                <div class="hint">
                    <img src="../../assets/imgs/branch.png" alt="提示图片" />
                    <span>选择您想去办理的网点</span>
                </div>
                <el-form-item label="选择网点：" prop="value" >
                    <el-select v-model="ruleForm.value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                            <span style="float: left">{{ item.deptName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <div slot="footer" class="dialog-footer">
                    <el-button type="info" @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import BaseUpload from "./BaseUpload";
import upfile from "../common/upfile.vue";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
    data() {
        return {
            hasImg: "", //是否有确认书
            //网点列表
            options: [],
            //提交成功弹出框变量
            centerDialogVisible: false,

            //提交表单
            formData: new FormData(),

            //网点弹出框控制变量
            dialogVisible: false,

            // add:0,
            //表单唯一id
            classId: "",
            //填写的信息
            ruleForm: {

                linkman: "",
                ageName: "",
                number: "",
                oldnum: "",
                radio: 0,
                reason: "",
                value: "",
                appliCh: "",
                appliEh: "",
                appAddrCn: "",
                dengjichenluofile:[],
                appAddrEn: "",
                // phone:"",//电话
                commonArr: [],
                fixed: "1", // "操作类型保存提交
            },
            rules_common: { //共有人验证
                value: [{ //中文名
                        required: true,
                        message: "请填写",
                        trigger: "blur"
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5]{2,5}$/,
                        message: "请输入正确的中文名称",
                        trigger: "blur",
                    },
                ],
                // dengjichenluofile: [
                //     { required: true, message: "附件不能为空", trigger: "change" },
                // ],
                englishValue: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                siteValue: [{
                        required: true,
                        message: "请填写",
                        trigger: "blur"
                    },
                    {
                        pattern: /^((省|自治区).+(市))|(市|行政区|自治州).+(区|县).+(路|街|道|村).+号.*$/,
                        message: "你的地址格式不正确",
                        trigger: "blur",
                    }, {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],
                englishSiteValue: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ]

            },
            rules: {
                appliCh: [{
                        required: true,
                        message: "请填写",
                        trigger: "blur"
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5]{2,5}$/,
                        message: "请输入正确的中文名称",
                        trigger: "blur",
                    },

                ],

                appAddrCn: [{
                        required: true,
                        message: "请填写",
                        trigger: "blur"
                    }, {
                        pattern: /^((省|自治区).+(市))|(市|行政区|自治州).+(区|县).+(路|街|道|村).+号.*$/,
                        message: "你的地址格式不正确x",
                        trigger: "blur",
                    },
                    {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],

                linkman: [{
                        required: true,
                        message: "请填写",
                        trigger: "blur"
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5]{2,5}$/,
                        message: '名字输入错误'
                    }
                ],
                radio: [{
                    required: true,
                    message: "请选择",
                    trigger: "change"
                }],
                reason: [{
                    required: true,
                    message: "请填写",
                    trigger: "blur"
                }, {
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],

                number: [{
                    required: true,
                    message: "请填写",
                    trigger: "blur"
                }, {
                    pattern: /^[A-Za-z0-9]{0,30}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                oldnum: [{
                    required: true,
                    message: "请填写",
                    trigger: "blur"
                }, {
                    pattern: /^[A-Za-z0-9]{0,30}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
            },
            old_imgs: {},
        };
    },
    mounted() {
        //  this.id = this.$route.query.id
        // this.interface(this.$store.state.storeId);

        console.log(this.$store.state.storeDatas.site, 9898985);

        //获取从存储在路由中的classId
        this.classId = this.$route.query.id;
        //获取网点列表
        this.$http.get("/trademark/system/dept/findDept").then((res) => {
            this.options = res.data.data;
        });

        if (this.$store.state.stateJdg) {
            // let formDa = {};
            // Object.assign(
            //   formDa,
            //   this.$store.state.alterData.data,
            //   this.$store.state.alterData.public
            // );
            //console.log(this.$store.state.alterData.data, 9999);
            //提交的时候执行的代码
            this.hasImg = true;
            let {
                appliCh,
                appliEh,
                appAddrCn,
                appAddrEn,
               branchNetworkId,
                ageName,
                appNum,
                registNumOri,
                share,
                type,
                qrfile,
                contact,
                otherfile,
                withdrawReason,

            } = Object.assign(
                this.$store.state.alterData.public,
                this.$store.state.alterData.data,

            );

            this.ruleForm.appliCh = appliCh; //申请人名义（中文）
            this.ruleForm.appliEh = appliEh; //申请人名义（英文）
            this.ruleForm.appAddrCn = appAddrCn; //申请人地址（中文）
            this.ruleForm.appAddrEn = appAddrEn; //申请人地址（英文）
            this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);

            // this.formData.append("contacts", this.ruleForm.linkman); // 联系人
            this.ruleForm.linkman = contact; // 联系人
            this.ruleForm.ageName = ageName; //代理机构名称
            this.ruleForm.number = appNum; //商标注册号
            this.ruleForm.oldnum = registNumOri; //原商标号
            this.ruleForm.radio = share; //是否公用商标
            this.ruleForm.reason = withdrawReason; //撤回理由
            this.ruleForm.type = type; //商标类别
            this.ruleForm.value = Number(branchNetworkId); //商标类别
            var appendArrLoaded = this.$store.state.alterData.append; //共有人

            if (qrfile) {
                this.$set(this.old_imgs, "qrfile", this.mconfig.host + qrfile);
            }


            // 其他共有人数据回显
            let commonArr = [];

           if(Array.isArray(appendArrLoaded)){
               commonArr=appendArrLoaded;
           }
            this.ruleForm.commonArr = commonArr;


        }
        // //console.log(this.$store.state.stateJdg);
    },

    watch: {

    },
    methods: {
        getBothZ(value) { //共有人数据
        console.log(value);
            this.ruleForm.commonArr = value;
        },
        backUrl(url,file_config){
            this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
            this.ruleForm[file_config["field"]].splice(index,1)
            this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        //网上确认书
        // setSure(files) {
        //   this.ruleForm.qrfile = files[0];
        // },
        setSure(files) {
            this.ruleForm.qrfile = files[0];
            this.old_imgs["qrfile"] = "";
            //console.log(this.ruleForm.qrfile)
            if (this.ruleForm.qrfile) {
                this.hasImg = true;
            } else {
                this.hasImg = false;
            }
        },

        hasqrfile(rule, value, callback){
             if (this.old_imgs['qrfile']) {
                callback();
            } else {
                callback(new Error("请上传网上确认书！"));
            }
        },

        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {

            this.$message({
                message: msg,
                type: types,
            });
        },

        //   // 提交前验证
        testing() {
            var dialogVisibleFirst = false;


            this.$refs["ruleForm"].validate((valid) => { //验证主要信息
                if (valid == false) {
                    dialogVisibleFirst = false
                } else {
                    dialogVisibleFirst = true
                }
            });



            if (!this.hasImg) { //验证图片是否有
                this.open1("网上确认书未上传", "error");
            }
            this.dialogVisible = (dialogVisibleFirst) ;
        },

        //弹出框的选项确认框
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },

        //表单提交事件
        submitForm(formName) {
            let _this = this;

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //每次提交重新生成新的FormData用于储存新的数据
                    this.dialogVisible = false;
                    let arr = this.$store.getters.getRuleForm;

                    this.formData=new FormData();

                    for (let key in arr) {
                        this.formData.append(key, arr[key]);
                    }

                    // this.formData.append("contacts", this.ruleForm.linkman); // 联系人

                    this.formData.append("ageName", this.ruleForm.ageName); //代理机构名称
                    this.formData.append("appNum", this.ruleForm.number); //商标注册号
                    this.formData.append("registNumOri", this.ruleForm.oldnum); //原商标号
                    this.formData.append("share", this.ruleForm.radio); //是否公用商标
                    this.formData.append("withdrawReason", this.ruleForm.reason); //撤回理由
                    // this.formData.append("phone", this.ruleForm.reason); //电话
                    // this.formData.append("qrfiles", this.ruleForm.qrfile); //网上确认书
                    this.formData.append("optype", this.ruleForm.fixed); //保存提交
                    this.formData.append("classId", this.classId); //保存提交
                    this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));
                    this.formData.append("branchNetworkId", this.ruleForm.value); //保存提交
                    this.formData.append(
                        "qrfiles",
                        !this.old_imgs.qrfile || this.ruleForm.qrfile ? this.ruleForm.qrfile : {}
                    ); //网上确认书

                    this.formData.append("id", this.$store.state.storeId); // 获取当前业务的id

                    /****************************************需要提交的信息开始***********************************************/
                    // this.formData.append(
                    //   "busimg",
                    //   this.$store.state.company_card_info.url
                    // ); //营业执照
                    // 共享人
                    // formData.append(
                    //   "proAppendJson",
                    //   JSON.stringify(this.ruleForm.commonArr)
                    // );
                    if (this.ruleForm.radio == 1) { //是1说明是共享的,集体的,需要共有人
                        this.formData.append(
                            "proAppends",
                            JSON.stringify(this.ruleForm.commonArr)
                        );
                    }

                    var config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };
                    // axios向后端发送数据
                    this.$http
                        .post( //修改or提交
                            this.$store.state.stateJdg ?
                            "/trademark/proWocotadra/modifyNoCommit" :
                            "/trademark/proWocotadra/firstSubmit",
                            this.formData,
                            config
                        )
                        .then(function (response) {
                            //若状态码不为200则不跳转
                            if (response.data.code != 200) {
                                _this.open1("提交失败", "error");
                                return;
                            }

                            _this.centerDialogVisible = true;
                        })
                        .catch(function (error) {});
                } else {
                    return false;
                }
            });
        },
        //跳转函数
        skip() {
            this.centerDialogVisible = false;
            // this.open1("操作成功");
            this.$router.push({
                path: "/business/myBusiness/auditing",
            });
        },
        //重置表单函数(没用上)
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    components: {
        BaseUpload,
        upfile,
        both,
        examimg,
        uploads
    },
};
</script>

<style lang="less" scoped>


.type-number {
    width: 250px;
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 100px;
    width: 100%;
    min-height: 800px;

    .tle {
        font-size: 24px;
        color: #000;
    }

    // .must,
    // .select {
    //   display: flex;
    //   position: relative;
    //   flex-direction: column;
    //   align-items: center;
    //   justify-content: center;
    //   padding: 30px 0 30px;
    //   margin-bottom: 80px;
    //   // width: 1000px;
    //   // border: 1px solid #bbbbbb;
    //   border-radius: 10px;
    //   .el-form-item {
    //     width: 680px;
    //   }
    //   .inline {
    //     display: flex;
    //     .el-form-item {
    //       margin: 0;
    //       width: 290px !important;
    //     }
    //   }
    // }
    .must,
    .select {
        display: flex;
        position: relative;
        left: -60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        // width: 1000px;
        // border: 1px solid #bbbbbb;
        border-radius: 10px;

        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 250px;
            height: 32px;
            color: #F96900;
            font-size: 10px;
            line-height: 16px;

            img {
                margin: 11px;
            }

            .content {
                display: flex;
                flex-direction: column;

                .ts {
                    text-indent: 3em;
                }
            }
        }

        .el-form-item {
            width: 580px;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }

            margin-bottom: 22px;
        }
    }

    .must {
        margin-bottom: 20px;

    }

    .line {
        width: 55vw;
        max-width: 1200px;
        margin: 20px auto;
        margin-left: 110px;
        height: 1px;
        min-width: 630px;
        border-top: 1px dashed #d9d9d9;
    }

    .imgHint {
        margin: 5px;
        font-size: 12px;
        line-height: 17px;
        color: #F96900;
    }

    .affirm {
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .input {
        width: 190px;
    }

    .upload {
        margin: 20px 0;
        // width: 200px;
        // height: 300px;
    }

    .type-number {
        width: 250px;
    }

    .inform {
        position: absolute;
        top: 10px;
        left: 260px;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
             color: #4c92ff;
        }
    }

    .tle {
        list-style: none;
        margin: 40px 0 20px;
        font-size: 24px;

        &~.tle {
            color: #bbb;
        }
    }

    .hint {
        color: #F96900;
        background-color: #fff;

        .el-form-item__label {
            width: 150px;
        }

        img {
            width: 20px;
        }
    }

    .el-steps {
        width: 70%;
        height: 200px;
    }

    .el-button {
        //display: block;
        display: inline;
        margin: 0 20px;
        // background-color: #67c23a !important;
        // border-color: #67c23a !important;
    }

    .common .el-button {
        background-color: #fff !important;
        border-color: #bbb !important;
    }
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 100px !important;
}

.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

.el-checkbox-group {
    line-height: 14px;
}

.el-radio/deep/.el-radio__inner:hover {
    border-color: #999999 !important;
}

.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
    color: #333;
}

.el-step__head.is-process {
    border-color: #f96900;
    color: #f96900 !important;
}

.hintMsg {
    /deep/.el-dialog__header {
        display: flex;
        justify-content: center;
        font-weight: bold;
    }

    .dialog-footer {
        justify-content: center;

        .el-button {
            border-color: #2c9dfc !important;
            background: #2c9dfc !important;
        }
    }
}

.notice {
    color: #F96900;
    font-size: 12px;
}

.informs a {
    text-decoration: none;
    color: #3685ff;
}

.btn-group-com {
    //改变加减按钮的位置
    padding: 0 0 24px 180px;
}

//fiexed dialog 0902

/deep/ .el-dialog.el-dialog--center /deep/ {
    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        padding: 20px;
    }

    .hint {
        color: #F96900;
        background-color: #fff;
        padding: 0;
        padding-bottom: 20px;
    }

    .el-button {
        margin: 0;
    }

    .el-form-item__label {
        width: 86px !important;
    }
}


.btns {
    margin-top: 35px;

    .el-button {
        margin: 0;
        margin-right: 20px;
    }
}
#star{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 465px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
